<template>
    <div @click.stop>
        功能菜单
        <div class="menu-item" @click="handleViewProperties">
            <span>查看属性</span>
        </div>
        <div class="menu-item" @click="handleViewDetails">
            <span>查看详情</span>
        </div>
        <div class="menu-item" @click="handleHide">
            <span>隐藏</span>
        </div>
        <div class="menu-item" @click="handleShow">
            <span>显示</span>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { getobjm, getSceneObj, getPickedTilesetInfo } from '../scripts/getobjm';

const objm = getobjm()
const es3DTileset = getSceneObj(objm, "bim-model1")

const props = defineProps<{
    pickedTilesetInfo: any;
}>();

// 菜单项点击处理
const handleViewProperties = () => {
    emit('view-properties');
}

const handleViewDetails = () => {
    emit('view-details');
}

// 菜单项点击处理
const handleHide = () => {
    es3DTileset.setFeatureVisable(
        "id", [
        {
            value: props.pickedTilesetInfo.id,
            visable: false,
        },
    ]
    );
    emit('tile-hide');
}

const handleShow = () => {
    es3DTileset.setFeatureVisable(
        "id", [
        {
            value: props.pickedTilesetInfo.id,
            visable: true,
        },
    ]
    );
    emit('tile-show');
}

const showModal = (url: string) => {
    modalUrl.value = url;
    modalVisible.value = true;
};

// 定义组件事件
const emit = defineEmits(['view-properties', 'view-details', 'tile-hide', 'tile-show']);
</script>

<style>
.context-menu {
    position: fixed;
    background-color: #3e4249;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 120px;
}

.menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: #d6deea;
    background-color: #153651;
}

.menu-item:hover {
    background-color: #616161;
}

.menu-item span {
    font-size: 14px;
    color: #faf7f7;
}
</style>